import React from 'react'
import { useBusiness } from '@/stores/useBusinessStore'
import { getAssessmentTypeName } from '@/utils/utils'
import type { MaturityLevelStat } from '@/types/work'


interface ComplianceHeaderProps {
  progress: number
  totalItems: number
  completedItems: number
  maturityLevelStats?: MaturityLevelStat[]
}

const ComplianceHeader: React.FC<ComplianceHeaderProps> = ({ 
  progress, 
  totalItems, 
  completedItems,
  maturityLevelStats = []
}) => {
  // 获取当前选中的业务系统
  const { selectedBusiness } = useBusiness();
  
  const businessTitle = selectedBusiness 
    ? `${selectedBusiness.name} - ${getAssessmentTypeName(selectedBusiness.assessmentType)}`
    : '系统合规性检查';
  
  // 根据成熟度等级获取颜色（不同透明度）
  const getMaturityColor = (level: number) => {
    const baseColor = '#9A334F'
    const opacity = 0.3 + (level * 0.14) // level 1: 0.44, level 2: 0.58, level 3: 0.72, level 4: 0.86, level 5: 1.0
    return `${baseColor}${Math.round(opacity * 255).toString(16).padStart(2, '0')}`
  }
    
  return (
    <div className="bg-card rounded-lg shadow-sm p-4">
      <div className="flex flex-col md:flex-row md:items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold text-foreground">
            {businessTitle}
          </h2>
          <p className="text-sm text-muted-foreground mt-1">
            系统合规性检查项
          </p>
        </div>
        
        <div className="mt-4 md:mt-0 flex flex-col items-end space-y-3">
          {/* 总体完成进度 */}
          <div className="flex items-center space-x-4">
            <div className="flex items-center space-x-2 w-32">
              <span className="inline-block w-3 h-3 bg-primary rounded-full flex-shrink-0"></span>
              <span className="text-sm text-muted-foreground whitespace-nowrap">已完成 {completedItems}/{totalItems}</span>
            </div>
            
            <div className="w-24 bg-secondary rounded-full h-2 overflow-hidden">
              <div 
                className="bg-primary h-2 rounded-full transition-all duration-500 ease-in-out"
                style={{ width: `${progress}%` }}
                role="progressbar"
                aria-valuenow={progress}
                aria-valuemin={0}
                aria-valuemax={100}
              />
            </div>
            
            <span className="text-sm font-medium text-foreground w-12 text-right">
              {progress}%
            </span>
          </div>
          
          {/* 成熟度等级进度（仅数据安全评估） */}
          {maturityLevelStats.length > 0 && (
            <div className="flex flex-col space-y-2">
              {maturityLevelStats.map((stat) => (
                <div key={stat.level} className="flex items-center space-x-4">
                  <div className="flex items-center space-x-2 w-32">
                    <span 
                      className="inline-block w-3 h-3 rounded-full flex-shrink-0"
                      style={{ backgroundColor: getMaturityColor(stat.level) }}
                    ></span>
                    <span className="text-sm text-muted-foreground whitespace-nowrap">
                      成熟度等级{stat.level} {stat.completed}/{stat.total}
                    </span>
                  </div>
                  
                  <div className="w-24 bg-secondary rounded-full h-2 overflow-hidden">
                    <div 
                      className="h-2 rounded-full transition-all duration-500 ease-in-out"
                      style={{ 
                        width: `${stat.progress}%`,
                        backgroundColor: getMaturityColor(stat.level)
                      }}
                      role="progressbar"
                      aria-valuenow={stat.progress}
                      aria-valuemin={0}
                      aria-valuemax={100}
                    />
                  </div>
                  
                  <span className="text-sm font-medium text-foreground w-12 text-right">
                    {stat.progress}%
                  </span>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

export default ComplianceHeader
